<template>
  <div class="chart-wrapper" ref="grapgChart"></div>
</template>

<script>
import echarts from "echarts";
import { onMounted, onBeforeUnmount, ref } from "vue";
import { debounce } from "@/utils/index.js";
import { selectCityData } from "@/api/chart";

export default {
  name: "wordChart",
  setup() {
    const grapgChart = ref(null);
    let myChart = ref(null);
    let cityCode = ref("100000");

    const resizeHandler = debounce(() => {
      if (myChart) {
        myChart.resize();
      }
    }, 200);

    onMounted(() => {
      getChartData();
      window.addEventListener("resize", resizeHandler);
    });
    onBeforeUnmount(() => {
      window.removeEventListener("resize", resizeHandler);
    });

    //模拟接口，获取echarts数据
    const getChartData = async () => {
      const { data } = await selectCityData({
        abcode: cityCode.value,
      });
      initEcharts(data);
    };

    //渲染echarts图
    const initEcharts = (data) => {
      const colorList = [
        "#28CAD8",
        "#E5A214",
        "#F69F73",
        "#ff7f50",
        "#87cefa",
        "#da70d6",
        "#32cd32",
        "#6495ed",
        "#ff69b4",
        "#cd5c5c",
        "#1e90ff",
        "#ff6347",
        "#7b68ee",
        "#6b8e23",
        "#4ea397",
        "#b8860b",
        "#7bd9a5",
      ];
      myChart = echarts.init(grapgChart.value);
      myChart.setOption(
        {
          title: {
            show: data.length === 0,
            top: "center",
            left: "center",
            text: "暂无数据",
            textStyle: {
              color: "rgb(179, 239, 255)",
              fontSize: 12,
            },
          },
          tooltip: {},
          toolbox: {
            feature: {
              restore: {
                show: false,
              },
              dataView: {
                show: false,
              },
              saveAsImage: {
                show: false,
              },
              dataZoom: {
                show: false,
              },
              magicType: {
                show: false,
              },
              myTool1: {
                show: cityCode.value != "100000",
                title: "返回",
                icon:
                  "image://",
                onclick() {
                  cityCode.value = "100000";
                  getChartData();
                },
              },
            },
            itemSize: 18,
            iconStyle: {
              normal: {
                borderColor: "#1990DA",
              },
              emphasis: {
                color: "#d5dfe8",
              },
            },
            top: 25,
            right: 15,
          },
          animationDurationUpdate: (index) => {
            return index * 100;
          },
          animationEasingUpdate: "bounceIn",
          series: [
            {
              type: "graph",
              layout: "force",
              force: {
                repulsion: 55,
                edgeLength: 10,
              },
              roam: true,
              label: {
                normal: {
                  show: true,
                  formatter: (p) => {
                    switch (p.name) {
                      case "内蒙古自治区":
                        p.name = "内蒙古";
                        break;
                      case "西藏自治区":
                        p.name = "西藏";
                        break;
                      case "新疆维吾尔自治区":
                        p.name = "新疆";
                        break;
                      case "宁夏回族自治区":
                        p.name = "宁夏";
                        break;
                      case "广西壮族自治区":
                        p.name = "广西";
                        break;
                      case "香港特别行政区":
                        p.name = "香港";
                        break;
                      case "澳门特别行政区":
                        p.name = "澳门";
                        break;
                      default:
                        break;
                    }
                    return p.name;
                  },
                },
              },
              draggable: true,
              symbolSize: (params) => {
                let value = parseFloat(params) / 40;
                if (value < 25) {
                  return 25;
                } else if (value > 60) {
                  return 60;
                }
                return value;
              },
              itemStyle: {
                normal: {
                  shadowBlur: 35,
                  shadowColor: "rgb(58,115,192)",
                  color: (params) => {
                    return colorList[
                      Math.floor(Math.random() * colorList.length)
                    ];
                  },
                },
              },
              data: data,
            },
          ],
        },
        true
      );

      myChart.off("click");
      myChart.on("click", (params) => {
        if (data.length === 1) {
          return;
        }
        cityCode.value = params.data.adcode;
        getChartData();
      });
    };

    return {
      grapgChart,
    };
  },
};
</script>
